<template>
	<view>
		<searchView v-model="keyword" placeholder="输入用户手机号或会员ID" @onSearch="handleSearch" />
		<view class="container">
			<view class="content-item" v-for="item in memberList">
				<view class="left-image">
					<image src="/static/img/agent/es.png" mode=""></image>
					<text class="machineStatus">运行中</text>
				</view>
				<view class="right-content">
					<view class="item-name" v-if="item.total_amount<30000">
						超级路由器
					</view>
					<view class="item-name" v-else>
						X86服务器
					</view>

					<view class="item-info">
						<text>{{item.nickname}}</text>
						<text class="separate">|</text>
						<text>会员ID： {{item.id}}</text>
					</view>
					<view class="item-price">
						<text class="symbol">￥</text>
						<text>{{item.total_amount}}</text>
					</view>
					<view class="item-disposition">
						<text>总数</text>
						<text class="count" v-if="item.total_amount<30000">2台</text>
						<text class="count" v-else>1台</text>
						<text>{{item.remaining_days}}</text>
					</view>
				</view>
			</view>
		</view>
		<CustomTabbar />
	</view>
</template>

<script>
	import searchView from "@/pages/agent/components/search.vue"
	import CustomTabbar from "@/pages/agent/components/custom-tabbar.vue"
	var app = getApp();
	export default {
		data() {
			return {
				memberList: [],
				loadmore: false,
				pagenum: 1,
				keyword: ''
			};
		},
		components: {
			searchView,
			CustomTabbar
		},
		onPullDownRefresh: function() {
			this.loadData();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.loadData(true);
			}
		},
		onLoad(opt) {
			this.opt = app.getopts(opt)
			console.log('--newtoken11111>>>' + this.opt.token)
			if (this.opt.token != undefined) {
				this.setlogin()
			} else {
				var huancun = uni.getStorageSync('login_token')
				console.log('--newtoken2222huanc>>>' + huancun)
				if (huancun != '') {
					this.setlogin1(huancun)
				} else {
					this.loadData()
				}
			}
		},
		methods: {
			setlogin: function () {
			  var that = this
			  app.post('ApiIndex/logintogether', { gtksession: that.opt.token }, function (res) {
			    that.getdata()
			    if (res.status == 1) {
			      console.log('new--token保持缓存:' + res.login_token)
			      //	that.login_token = res.login_token
			      uni.setStorageSync('login_token', res.login_token)
			    }
			  })
			},
			setlogin1: function(huancun) {
				var that = this
				console.log('login---jump:::' + huancun)
				app.post('ApiIndex/logintogether', {
					gtksession: huancun
				}, function(res) {
					that.loadData()
					uni.setStorageSync('login_token', res.login_token)
				})
			},
			loadData(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.memberList = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				that.nodata = false;
				that.nomore = false;
				that.loading = true;
				app.post('ApiMy/indexUser', {
					pagenum: pagenum,
					keyword: that.keyword
				}, function(res) {
					that.loading = false;
					var data = res.datalist;
					if (pagenum == 1) {
						that.memberList = data;
						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded();
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var memberList = that.datalist;
							var newdata = memberList.concat(data);
							that.memberList = newdata;
						}
					}
				});
				// console.log(that.memberList)
			},
			handleSearch(value) {
				console.log('搜索关键字:', value)
				this.keyword = value
				// 这里处理搜索逻辑
				if (!value) {
					return uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
				}
				this.loadData();
			}
		}
	}
</script>

<style lang="less" scoped>
	page,
	html {
		background-color: #F1F3F5;
		font-family: 'Regular', sans-serif;
	}

	.container {
		width: 676rpx;
		margin: auto;

		.content-item {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.left-image {
				position: relative;
				width: 195rpx;
				height: 195rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

				.machineStatus {
					position: absolute;
					font-size: 10rpx;
					transform: scale(0.7);
					color: #F1F3F5;
					right: 0%;
					top: 0%;
				}
			}

			.right-content {
				width: calc(676rpx - 195rpx - 32rpx);
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-name {
					font-size: 40rpx;
					margin-top: -12.5rpx;
				}

				.item-info {
					font-family: 'Normal' !important;
					color: #0086EF;
					font-size: 28rpx;
					margin-top: -2.5rpx;

					.separate {
						padding: 0 8rpx;
					}
				}

				.item-price {
					margin-left: -7rpx;
					margin-top: -10rpx;
					font-size: 48rpx;
					color: #FF0000;

					.symbol {
						font-size: 40rpx;
					}
				}

				.item-disposition {
					height: 46rpx;
					width: 375rpx;
					font-weight: 100;
					margin-top: 2rpx;

					text {
						background-color: #0086EF;
						color: #fff;
						padding: 10rpx 18rpx;
					}

					text:last-child {
						padding: 10rpx 22rpx;
					}

					.count {
						color: #000;
						padding: 6rpx 26rpx;
						background-color: #fff;
						border: 4rpx solid #0086EF;
					}
				}
			}
		}
	}
</style>
